<template>
    <div class="doctorlist">
        <page-title>医生列表</page-title>
        <div class="content-box">
          <div class="filter-box">
              <span class="item-name">输入搜索:</span>
              <el-input 
                placeholder="医生姓名" 
                v-model="params.search.name"></el-input>
              <el-button 
                type="primary" 
                style="margin-left: 10px;"
                @click="fetchListData">查询结果</el-button>
              <el-button 
                style="float: right;margin-right:20px;"
                @click="$router.push({name: 'addDoctor'})">添加医生</el-button>
          </div>
          <el-table
              :data="dataList"
              :row-class-name="getRowClass"
              border
              style="width: 100%">
              <el-table-column
                align="center"
                width="100"
                label="医生头像">
                <template slot-scope="scope">
                    <div class="doctorimg" :style="'background-image:url('+img_host+scope.row.avatar+')'"></div>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                align="center"
                width="180"
                label="医生姓名">
              </el-table-column>
              <el-table-column
                align="center"
                width="100"
                label="医生性别">
                <template slot-scope="scope">
                    <span>{{scope.row.sex | sex}}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="age"
                align="center"
                width="100"
                label="医生年龄">
              </el-table-column>
              <el-table-column
                prop="introduce"
                align="center"
                label="医生简介">
              </el-table-column>
              <el-table-column
                prop="domains"
                align="center"
                label="擅长领域">
              </el-table-column>
              <!-- <el-table-column
                prop="patientNum"
                align="center"
                width="130"
                label="医治病人个数"> -->
              </el-table-column>
              <el-table-column 
                label="操作" 
                align="center"
                width="150"
                show-overflow-tooltip>
                    <template slot-scope="scope">
                        <el-button 
                            type="text" 
                            size="small"
                            @click="edit(scope.row)">编辑</el-button>
                        <el-button 
                            type="text" 
                            size="small"
                            @click="open(scope.row.doctor_id)">删除</el-button>
                        <el-button 
                            type="text" 
                            size="small"
                            v-if="scope.row.status != 3"
                            @click="freeze(scope.row.doctor_id)">冻结</el-button>
                        <el-button 
                            type="text" 
                            size="small"
                            v-else
                            @click="warm(scope.row.doctor_id)">解除冻结</el-button>
                    </template>
              </el-table-column>
          </el-table>
          <div class="footer-box">
              <div class="pagination-box">
                  <el-pagination
                      layout="prev, pager, next"
                      :page-size="params.limit"
                      @current-change="handleCurrentChange"
                      :total="total">
                  </el-pagination>
              </div>
          </div>
            
        </div>
    </div>
</template>
<script>
import * as api from '../../api/api'
import { Message } from 'element-ui'
export default {
    name: 'doctorlist',
    data () {
        return {
            dataList: [],  //列表数据
            total: 0,      //数据总条数
            img_host: '',  //图片域名
            //请求数据参数
            params: {
                "model": "Doctors",
                "offset": 0,
                "limit": 10,
                "with": {
                  0:"doctorInquirys"
                },
                "orderBy": "create_time desc",
                "condition": {
                    "is_delete": 0
                },
                "search": {
                    "name": ''
                }
            }
        }
    },
    created() { 
        var that = this;
        that.img_host = 'http://renqing123.oss-cn-shenzhen.aliyuncs.com/';
        that.fetchListData();
    },
    methods: {
        //请求医生列表
        fetchListData(){
            var that = this;
            api.getDateList(that.params).then( res => {
                if (res.data.code == 200) {
                    that.total = res.data.data.count - 0;
                    that.dataList = res.data.data.data;
                }
            });
        },
        getRowClass({ row, rowIndex}) {
            console.log(row.status)
            if (row.status == 3) {
                return 'gray'
            }
        },
        //点击页码
        handleCurrentChange(val) {
            var that = this;
            that.params.offset = (val - 1);
            that.fetchListData();
        },
        //冻结医生
        freeze(id) {
            var that = this;
            api.createData({
              "model": "Doctors",
              "data":{
                  "status":3
              },
              "update_condition": {
                  "doctor_id": id
              }
            }).then( res => {
              if (res.data.code == 200) {
                Message({
                    message: '冻结成功',
                    type: 'success',
                    duration: 1000
                });
                that.fetchListData();
              }
            })
        },
        //解冻医生
        warm(id) {
            var that = this;
            api.createData({
              "model": "Doctors",
              "data":{
                  "status":0
              },
              "update_condition": {
                  "doctor_id": id
              }
            }).then( res => {
              if (res.data.code == 200) {
                Message({
                    message: '解冻成功',
                    type: 'success',
                    duration: 1000
                });
                that.fetchListData();
              }
            })
        },
        //删除医生
        deleteDoctor(id) {
          var that = this;
          api.createData({
            "model": "Doctors",
            "data":{
                "is_delete":1   
            },
            "update_condition": {
                "doctor_id": id
            }
          }).then( res => {
            if (res.data.code == 200) {
              Message({
                  message: '删除成功',
                  type: 'success',
                  duration: 1000
              });
              that.fetchListData();
            }
          })
        },
        //提示弹框
        open (id) {
            this.$confirm('此操作将永久删除该医生账号, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.deleteDoctor(id);
            });
        },
        //编辑医生信息
        edit (item) {
            //将医生信息存session
            var str = JSON.stringify(item);
            window.sessionStorage.setItem('edit-doctor', str);
            //进入编辑页
            this.$router.push({
                name: 'addDoctor',
                query: {
                    type: 'edit'
                }
            })
        }
    },
    components: {},
    filters: {
        sex: function (value) {
            switch (value)
            {
                case '1':
                    return '男';
                case '2':
                    return '女';
                default:
                    return '未知';
            }
        }
    }
}
</script>
<style>
    .filter-box input.el-input__inner, .filter-box .el-input{
        width: 170px;
    }
    .multiple-box input.el-input__inner, .multiple-box .el-input {
        width: 120px;
        margin-left: 10px;
    }
    .doctorlist .el-tabs__header {
        margin: 0;
    }
    .gray {
        background: rgba(0,0,0,.03)!important;
    }
</style>
<style scoped lang="scss">
    .doctorlist {
        background: #ffffff;
        height: 100%;
        position: relative;
        box-sizing:border-box;
        color: #666666;
        font-size: 14px;
        .content-box {
            padding: 20px;
            padding-bottom: 70px;
            .filter-box {
                padding: 30px 0;
                border: 1px solid #e4e7ed;
                border-bottom: none;
                .item-name {
                    padding-left: 30px;
                    padding-right: 10px;
                }
            }
            .operate{
                width:100%;
                height: 100%;
                text-align: center;
                span {
                    color: #1ABC9C;
                    margin: 0 5px;
                }
            }
            .footer-box {
                height: 50px;
                padding-top: 20px;
                .multiple-box {
                    height: 50px;
                    line-height: 50px;
                    padding-left: 19px;
                }
                .pagination-box {
                    height: 50px;
                    line-height: 50px;
                    background: #ffffff;
                    display: flex;
                    justify-content: center;
                    align-items:center;
                    padding-top: 25px;
                }
            }
            .banner-setting {
                position: relative;
                width: 100%;
                height: 800px;
                background: #ffffff;
                border: 1px solid #e4e7ed;
                border-top: none;
                padding: 20px;
                .upload-item {
                    padding-top:45px;
                    padding-bottom:100px;
                    .upload-text {
                        font-size: 12px;
                        color: #999999;
                        margin-left: 30px;
                    }
                }
                .btn-box {
                    text-align: center;
                }
            }
        }
        .doctorimg {
            width:60px;
            height: 60px;
            margin: auto;
            background-size: cover;
            background-position: center top;
        }
    }
</style>
